<template>
  <div class="content-info">
    <LabelTitle text="服务设施数据" :showImg="false"></LabelTitle>
    <div class="content-box nobg mt10">
      <div class="fwss-item" v-for="(item, index) in fwsslist" :key="index">
        <img :src="item.url" />
        <p class="name">{{ item.name }}</p>
        <p class="num">{{ getValue(item.name) }}</p>
      </div>
    </div>
    <LabelTitle class="mt10" text="房屋数据" :showImg="false"></LabelTitle>
    <div class="content-box mt10">
      <div class="fw-list-item" v-for="(item, index) in fwlist" :key="index">
        <span class="name">{{ item.name }}</span>
        <span class="num">{{ item.num }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import LabelTitle from "@/components/labeltitle.vue";
import { useUserStore } from "@/pinia/user.js";
const piniaUser = useUserStore();
import { onMounted } from "vue";
import { getzdbList, dispatchEvent, completeEvent } from "@/api/event.js";
import { getFFssFun, getHourse } from "@/api/gggl.js";
import img1 from "@/assets/images/fwss/1.png";
import img2 from "@/assets/images/fwss/2.png";
import img3 from "@/assets/images/fwss/3.png";
import img4 from "@/assets/images/fwss/4.png";
import img5 from "@/assets/images/fwss/5.png";
import img6 from "@/assets/images/fwss/6.png";
import img7 from "@/assets/images/fwss/7.png";
import img8 from "@/assets/images/fwss/8.png";
import img9 from "@/assets/images/fwss/9.png";

let fwsslist = ref([
  {
    name: "教育机构",
    num: 19,
    url: img1,
  },
  {
    name: "医疗卫生机构",
    num: 3,
    url: img2,
  },
  {
    name: "文体场馆",
    num: 18,
    url: img3,
  },
  {
    name: "应急避难场所",
    num: 15,
    url: img4,
  },
  {
    name: "公共厕所",
    num: 8,
    url: img5,
  },
  {
    name: "公园",
    num: 1,
    url: img6,
  },
  {
    name: "废品回收站点",
    num: 15,
    url: img7,
  },
  {
    name: "垃圾分类站点",
    num: 8,
    url: img8,
  },
  {
    name: "菜市场",
    num: 3,
    url: img9,
  },
]);

let fwlist = ref([
  {
    name: "楼栋数量/个",
    num: 123,
  },
  {
    name: "危房数量/个",
    num: 0,
  },
  {
    name: "房屋数量/个",
    num: 312,
  },
  {
    name: "老旧建筑数量/个",
    num: 0,
  },
]);

let allData = ref([]);

const getValue = (name) => {
  let value = 0;
  allData.value.forEach((item) => {
    if (item.serverType == name) {
      value = item.count;
    }
  });
  return value;
};

const getData = async () => {
  try {
    let { data } = await getFFssFun({
      // eventStatus: "10",
    });
    // eventlist.value = data.busizEventList;
    allData.value = data;
  } catch (e) {
    console.error(e);
  }
};

const getHourseData = async () => {
  try {
    let { data } = await getHourse({
      // eventStatus: "10",
    });
    // eventlist.value = data.busizEventList;
    // allData.value = data;
    fwlist.value[0].num = data.buildingCount || 0;
    fwlist.value[1].num = data.dangerousBuildingCount || 0;
    fwlist.value[2].num = data.roomCount || 0;
    fwlist.value[3].num = data.oldBuildingCount || 0;
  } catch (e) {
    console.error(e);
  }
};

onMounted(() => {
  getData();
  getHourseData();
});

onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.content-info {
  width: 400px;
  margin-top: 15px;
  height: 100%;
  position: relative;
  margin-right: 15px;
  flex: 1;
  .content-box {
    height: calc(60% - 45px);
    padding: 15px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
    border-radius: 15px;
    padding: 21px 28px 0 28px;
    overflow: auto;
    &.nobg {
      height: calc(40% - 45px);
      background: none;
      box-shadow: none;
      display: flex;
      align-items: top;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      overflow: auto;
      padding: 0;
      .fwss-item {
        width: 115px;
        height: 112px;
        background: #ffffff;
        box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
        border-radius: 8px;
        padding: 15px 0;
        text-align: center;
        .text {
          margin-top: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #666666;
          line-height: 20px;
        }
        .num {
          margin-top: 4px;
          font-family: YouSheBiaoTiHei;
          font-size: 20px;
          color: #2263bf;
          line-height: 26px;
        }
      }
    }
    .fw-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px 0 18px;
      width: 100%;
      height: 41px;
      background: rgba(142, 191, 255, 0.15);
      border-radius: 8px;
      margin-bottom: 10px;
      .name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: #333333;
      }
      .num {
        font-family: YouSheBiaoTiHei;
        font-size: 18px;
        color: #2263bf;
      }
    }
  }
}
</style>
